<template>
    <div class="container">
        <div class="title">
            <h4 :class="{ 'active': index == 0 ? true : false }" @click="changeData(0)">管理员</h4>
            <h4 :class="{ 'active': index == 1 ? true : false }" @click="changeData(1)">门店</h4>
        </div>
        <div class="btn">
            <div>
                <el-input style="width: 200px; margin-right: 20px;" v-model="username" placeholder="请输入用户名"></el-input>
                <el-input style="width: 200px; margin-right: 20px;" v-model="phone" placeholder="请输入联系方式"></el-input>
                <el-button type="primary">搜索</el-button>
            </div>
            <img src="/nav/add.jpg" alt="" style="width: 20px;height: 20px;cursor: pointer;" @click="add">
        </div>
        <List :data="data" :deleFn="deleFn" :handleEdit="handleEdit"></List>
        <Dialog v-model="dialogVisible" :obj="obj" :tip="tip" :labels="labels" :sure="sure"></Dialog>
    </div>
</template>

<script>
import List from '@/components/admin/userList.vue'
import { getAdminInfo, getMendianInfo } from "@/api/index.js";
import { getObj } from '@/utils/index.js'
import Dialog from "./dialog.vue";
import axios from 'axios'

export default {
    name: 'AdminUser',
    data() {
        return {
            info: '1',
            mendian: '',
            data:
            {
                data: [

                ]
            },
            index: 0,
            username: '',
            phone: '',
            tip: '',
            dialogVisible: false,
            obj: {
                name: '',
                zhanghao: '',
                passsword: '',
                phone: ''
            },
            labels: [],
            //正在操作的行数的对象
            objIndex:0
        }
    },
    components: {
        List,
        Dialog,
    },
    methods: {
        changeData(num) {
            this.index = num
            if (num) {
                this.data = getObj(this.mendian, ['url', 'name', 'zhanghao', 'phone'], ['头像', '门店名', '账户', '联系方式', '更多'], true)
            } else {
                this.data = getObj(this.info, ['url', 'name', 'zhanghao', 'phone'], ['头像', '管理员名', '账户', '联系方式', '更多'], true)
            }
        },
        //添加
        add() {
            this.tip = '添加'
            if (this.index) {
                this.labels = ['门店名', '账户', '密码', '联系方式']
            } else {
                this.labels = ['用户名', '账户', '密码', '联系方式']
            }
            this.dialogVisible = true
        },
        //添加弹框确认事件
        sure(obj) {
            //objIndex 正在操作的对象
            //obj 是修改后的对象。在确认 添加后，应该请求后端修改对象，完成后再重新请求，刷新数据
            this.$message({
                type: 'success',
                message: '操作成功'
            })
            this.dialogVisible = false
            this.obj = {
                name: '',
                zhanghao: '',
                passsword: '',
                phone: ''
            }
        },
        //表格删除对象
        deleFn(index) {
            if (this.index) {
                // let data= await  deleMendian('/',obj)
                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
            } else {
                // let data= await  deleAdmin('/',obj)
                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
            }
            this.data.data.splice(index, 1)
        },
        //修改
        handleEdit(index, obj) {
            this.tip = '修改'
            this.objIndex=index
            this.obj = {
                name: obj.name,
                zhanghao: obj.zhanghao,
                phone: obj.phone
            }
            this.labels = ['名字', '账户', '联系方式']
            this.dialogVisible = true

        }
    },
    mounted() {
        
        this.info = [
            // {
            //     user_id: 1,
            //     name: '管理员1',
            //     phone: 6654545,
            //     isadmin: true,
            //     url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.vz_WG4Cx5wIlPiQhEjx4PwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
            //     zhanghao: '123456',

            // },
            {
                user_id: 2,
                name: '管理员2',
                phone: 6654545,
                isadmin: true,
                url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.vz_WG4Cx5wIlPiQhEjx4PwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                zhanghao: '123456',

            },
            {
                user_id: 6,
                name: '管理员3',
                phone: 6654545,
                isadmin: true,
                url: '',
                zhanghao: '123456',

            },
            {
                user_id: 4,
                name: '管理员4',
                phone: 6654545,
                isadmin: true,
                url: '',
                zhanghao: '123456',

            },
            {
                user_id: 1,
                name: '管理员5',
                phone: 6654545,
                isadmin: true,
                url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.vz_WG4Cx5wIlPiQhEjx4PwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                zhanghao: '123456',

            },
            {
                user_id: 2,
                name: '管理员6',
                phone: 6654545,
                isadmin: true,
                url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.vz_WG4Cx5wIlPiQhEjx4PwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                zhanghao: '123456',

            },
            {
                user_id: 6,
                name: '管理员7',
                phone: 6654545,
                isadmin: true,
                url: '',
                zhanghao: '123456',

            },
            {
                user_id: 4,
                name: '管理员8',
                phone: 6654545,
                isadmin: true,
                url: '',
                zhanghao: '123456',

            },
            {
                user_id: 1,
                name: '管理员9',
                phone: 6654545,
                isadmin: true,
                url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.vz_WG4Cx5wIlPiQhEjx4PwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                zhanghao: '123456',

            },
            {
                user_id: 2,
                name: '管理员10',
                phone: 6654545,
                isadmin: true,
                url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.vz_WG4Cx5wIlPiQhEjx4PwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                zhanghao: '123456',

            },
            {
                user_id: 6,
                name: '管理员11',
                phone: 6654545,
                isadmin: true,
                url: '',
                zhanghao: '123456',

            },
            {
                user_id: 4,
                name: '管理员12',
                phone: 6654545,
                isadmin: true,
                url: '',
                zhanghao: '123456',

            },
            {
                user_id: 1,
                name: '管理员13',
                phone: 6654545,
                isadmin: true,
                url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.vz_WG4Cx5wIlPiQhEjx4PwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                zhanghao: '123456',

            },
            {
                user_id: 2,
                name: '管理员14',
                phone: 6654545,
                isadmin: true,
                url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.vz_WG4Cx5wIlPiQhEjx4PwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                zhanghao: '123456',

            },
            {
                user_id: 6,
                name: '管理员15',
                phone: 6654545,
                isadmin: true,
                url: '',
                zhanghao: '123456',

            },
            {
                user_id: 4,
                name: '管理员16',
                phone: 6654545,
                isadmin: true,
                url: '',
                zhanghao: '123456',

            }
        ],
            this.mendian = [
                {
                    user_id: 1,
                    name: '门店1',
                    phone: 6654545,
                    url: '',
                    zhanghao: '123456',
                },
                {
                    user_id: 1,
                    name: '门店2',
                    phone: 6654545,
                    url: '',
                    zhanghao: '123456',
                },
                {
                    user_id: 1,
                    name: '门店3',
                    phone: 6654545,
                    url: '',
                    zhanghao: '123456',
                },
                {
                    user_id: 1,
                    name: '门店4',
                    phone: 6654545,
                    url: '',
                    zhanghao: '123456',
                },
                {
                    user_id: 1,
                    name: '门店5',
                    phone: 6654545,
                    url: '',
                    zhanghao: '123456',
                }
            ],
            
        
            this.info = []
            this.$axios.get("user/list/1/999999",{}).then(value => {
                value.data.data.list.records.forEach((val) => {
                    let temp = {
                        user_id: val.userId,
                        name: val.username,
                        phone: val.tel,
                        isadmin: true,
                        url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.vz_WG4Cx5wIlPiQhEjx4PwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                        zhanghao: val.account
                    }
                    this.info.push(temp)
                })
            })         
            this.data = getObj(this.info, ['url', 'name', 'zhanghao', 'phone'], ['头像', '管理员名', '账户', '联系方式', '更多'], true)
    },
}
</script>

<style scoped>
.container{
    width: 100%;
    height: 88vh;
}
.box {
    width: calc(100vw - 300px);
    background-color: #f9f9f9;
    padding: 10px;
    box-sizing: border-box;
}

.title {
    display: flex;
    align-items: center;
}

.title h4 {
    margin-right: 10px;
    cursor: pointer;
}

.active {
    font-size: 20px;

}

.btn {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    align-items: center;
}

.btn input {
    width: 20% !important;
}
</style>